<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用vw的方案</title>
    <style>
      /**
       * 如果按照375的设计稿，1vw => 0.1rem => 3.75px
       * 且这里不需要引用 rem + 动态html的font-size方案 的动态设置font-size的函数。
       * 虽然相对于 rem + 动态html的font-size方案 方便，但存在一些缺点，比如：
       *    1. vw是相对于视口的单位，如果屏幕尺寸大于值时想限制盒子的大小就没办法了
       * 但使用 rem + 动态html的font-size的方案 可以通过自定义的js来控制
       */
      .box {
        width: 26.667vw;
        height: 26.667vw;
        background-color: orange;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>
